import { Button, Card, Space, Table, message } from 'antd';
import React, { useEffect, useState } from 'react';

import TkongModel from './TkongModel';
import { DelTK, GetTK } from '../request';
import dayjs from 'dayjs';
import { useDeleteConfirm } from '@/hooks/useAlartMolder';
import { useIntl } from '@umijs/max';
import { SendCard } from '@/utils/Send';

interface Props {
  setsendMsg: any;
  setType: any;
  setTKRoomID: any;
  setCardMessage: any;
}
const ElevatorCard: React.FC<Props> = ({ setCardMessage, setsendMsg, setType, setTKRoomID }) => {
  const intl = useIntl();

  const columns: any = [
    // {
    //   title: 'ID号',
    //   dataIndex: 'id',
    //   align: "center",
    //   key: 'id',
    // },
    {
      title: intl.formatMessage({ id: 'FixLock.Building' }),
      dataIndex: 'bname',
      key: 'bname',
      align: 'center',
    },
    {
      title: intl.formatMessage({ id: 'FixLock.startFloor' }),
      dataIndex: 'startFloor',
      key: 'startFloor',
      align: 'center',
    },
    {
      title: intl.formatMessage({ id: 'FixLock.publicFloor' }),
      dataIndex: 'publicFloor',
      key: 'publicFloor',
      align: 'center',
    },

    {
      title: intl.formatMessage({ id: 'FixLock.publicFloor' }) + ' ID',
      dataIndex: 'pulicFloorId',
      key: 'pulicFloorId',
      align: 'center',
    },
    {
      title: intl.formatMessage({ id: 'FixLock.Access control card' }) + ' ID',
      dataIndex: 'roomId',
      key: 'remark',
      align: 'center',
    },
    {
      title: intl.formatMessage({ id: 'FixLock.remark' }),
      dataIndex: 'remark',
      key: 'remark',
      align: 'center',
    },

    {
      title: intl.formatMessage({ id: 'FixLock.permissions' }),
      dataIndex: 'permissions',
      render: (text: any) => (
        <a>
          {text == '1'
            ? intl.formatMessage({ id: 'FixLock.Turn on the direct access feature' })
            : text == '2'
              ? intl.formatMessage({ id: 'FixLock.After swiping the card' })
              : intl.formatMessage({ id: 'FixLock.Press all floors' })}
        </a>
      ),
      key: 'permissions',
      align: 'center',
    },
    {
      title: intl.formatMessage({ id: 'FixLock.created_at' }),
      dataIndex: 'createdAt',
      key: 'createdAt',
      align: 'center',
    },
    {
      title: intl.formatMessage({ id: 'FixLock.Action' }),
      align: 'center',
      render: (_: any, record: any) => (
        <Space size="middle">
          <a
            onClick={async () => {
              if (localStorage.getItem('clientid') == '00000000')
                return message.error(intl.formatMessage({ id: 'FixLock.Please register' }));
              let data = {
                cardclass: 'firstsetcard',
                uuid: 'setcardBBBB',
                setpubliclayeraf:
                  record.permissions == 1
                    ? '01080000'
                    : record.permissions == 2
                      ? '02080000'
                      : '03080000',
                setpubliclayer: record.pulicFloorId,
                setroomid: record.roomId,
                setlocktime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
              };

              let res = await SendCard(data);
              setCardMessage(res);

              setsendMsg(data);
              setType(`${record.bname}栋初发设置卡成功`);
              setTKRoomID(record);
            }}
          >
            {intl.formatMessage({ id: 'RoomSettings.Initial setup card' })}
          </a>
          <a
            onClick={async () => {
              if (localStorage.getItem('clientid') == '00000000')
                return message.error(intl.formatMessage({ id: 'FixLock.Please register' }));
              let data = {
                cardclass: 'setcard',
                uuid: 'setcardAAAA',
                setpubliclayeraf:
                  record.permissions == 1
                    ? '01080000'
                    : record.permissions == 2
                      ? '02080000'
                      : '03080000',
                setpubliclayer: record.pulicFloorId,
                setroomid: record.roomId,
                setlocktime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
              };
              let res = await SendCard(data);
              setCardMessage(res);
              setsendMsg(data);
              setType(`${record.bname}栋更新设置卡成功`);
              setTKRoomID(record);
            }}
          >
            {/* 更新发设置卡 */}
            {intl.formatMessage({ id: 'RoomSettings.Update settings card' })}
          </a>
          <a
            onClick={() => {
              showModal();
              setflag(true);
              setModelMsg(record);
            }}
          >
            {intl.formatMessage({ id: 'FixLock.modify' })}
          </a>
          <a
            style={{ color: 'red' }}
            onClick={async () => {
              if (Roomlist.length == 1) {
                useDeleteConfirm(intl.formatMessage({id:"RoomSettings.Room Last One"}), '', async (res) => {
                  if (res == true) {
                    let data = await DelTK(record.id);
                    if (data.code == 0) {
                      message.success(intl.formatMessage({ id: 'FixLock.Deleted successfully' }));
                      getTKong();
                      // window.location.reload()
                      setRoomlist([]);
                    }
                  }
                });
              } else {
                let data = await DelTK(record.id);
                if (data.code == 0) {
                  message.success(intl.formatMessage({ id: 'FixLock.Deleted successfully' }));
                  getTKong();
                }
              }
            }}
          >
            {intl.formatMessage({ id: 'FixLock.delete' })}
          </a>
        </Space>
      ),
    },
  ];
  const [Roomlist, setRoomlist] = useState<any>([]);
  const [TKlist, setTKlist] = useState([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [ModelMsg, setModelMsg] = useState();
  const [flag, setflag] = useState(false);

  const getTKong = async () => {
    let data = await GetTK({
      page: '1',
      pageSize: '20',
    });

    if (data.data.list) {
      for (var i = 0; i < data.data.list; i++) {
        data.data.list[i].bname =
          data.data.list[i].bname + intl.formatMessage({ id: 'FixLock.building' });
        console.log(data.data.list[i].bname);
      }
      setRoomlist(data.data.list);
    }
  };
  useEffect(() => {
    getTKong();
    if (localStorage.getItem('clientid') != '00000000') {
    }
  }, []);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
    setflag(false);
    getTKong();
  };
  return (
    <>
      <Card title={intl.formatMessage({ id: 'RoomSettings.Ladder control Set card' })}>
        <Button type="primary" onClick={() => showModal()}>
          {' '}
          {intl.formatMessage({ id: 'RoomSettings.Add elevator control doors' })}{' '}
        </Button>
      </Card>{' '}
      <br />
      <Card style={{ height: '79.7%' }}>
        <Table
          style={{ marginTop: '20px' }}
          rowKey={'id'}
          columns={columns}
          dataSource={Roomlist}
          pagination={false}
        />
      </Card>
      {isModalOpen == true && (
        <TkongModel
          flag={flag}
          ModelMsg={ModelMsg}
          isModalOpen={isModalOpen}
          handleOk={handleOk}
          handleCancel={handleCancel}
          setTKlist={setTKlist}
        />
      )}
    </>
  );
};

export default ElevatorCard;
